<template>
  <div class="container">
    <!-- 主要内容 -->
    <el-row type="flex" justify="center" align="middle" class="main">
      <div class="form-wrapper">
        <!-- 表单头部tab -->
        <el-row type="flex" justify="center" class="tabs">
          <span
            v-for="(item, index) in ['登录', '注册']"
            :key="index"
            :class="{ active: currentTab === index }"
            @click="handleChangeTab(index)"
            >{{ item }}</span
          >
        </el-row>
        <!-- 登录功能组件 -->
        <LoginForm v-if="currentTab === 0" />
        <!-- 注册功能组件 -->
        <RegisterForm v-if="currentTab === 1" @goLogin="currentTab = 0" />
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
    };
  },
  methods: {
    handleChangeTab(index) {
      this.currentTab = index;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 700px;
  min-width: 1000px;
  background: url(http://157.122.54.189:9095/assets/images/th03.jfif) center 0;
  .main {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    .form-wrapper {
      width: 400px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
      .tabs {
        width: 100%;
        height: 50px;
        span {
          display: block;
          width: 50%;
          height: 50px;
          color: #666;
          line-height: 48px;
          text-align: center;
          border-top: 2px solid #eee;
          background: #eee;
          cursor: pointer;
          &.active {
            background: #fff;
            font-weight: 700;
            color: orange;
            border-top-color: orange;
          }
        }
      }
    }
  }
}
</style>